<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-09-27 22:27:35
 * @LastEditors: 胡涛
 * @LastEditTime: 2023-09-27 23:27:33
-->
<template>
  <div class="fields-config">
    <div class="row row-header">
      <div class="col">排序号</div>
      <div class="col">字段名</div>
      <div class="col">显示名称</div>
      <div class="col">数据类型</div>
      <div class="col">输入组件</div>
      <div class="col col-action"></div>
    </div>
    <div class="row" v-for="(item, index) in fields" :key="item.key">
      <div class="col">{{ item.sortIndex }}</div>
      <div class="col">{{ item.key }}</div>
      <div class="col">{{ item.keyName }}</div>
      <div class="col">{{ formatKeyType(item.keyType) }}</div>
      <div class="col">{{ controlName(item.controlType) }}</div>
      <div class="col col-action">
        <a-button-group size="small">
          <a-button @click="onEditItem(item)">编辑</a-button>
          <a-button danger @click="onDeleteItem(index)">删除</a-button>
        </a-button-group>
      </div>
    </div>
    <div class="row-footer">
      <a-button type="primary" size="small" @click="onAddItem">添加项</a-button>
    </div>
  </div>

  <!--添加修改模块-->
  <edit-config-field
    v-if="popupModel.visible"
    :action="popupModel.action"
    v-model:visible="popupModel.visible"
    :id="popupModel.id"
    :item="popupModel.data"
    :fields="popupModel.fields"
    @success="onPopupSuccess"
  />
</template>

<script lang="ts" setup>
import { ConfigDefineDto } from "@/api/system/types";
import DropTable, {
  DropTableColumnConfig,
} from "@/components/drop-table/Index.vue";
import { IOptionItem } from "@/types";
import { Ref, ref } from "vue";
import EditConfigField from "./EditField.vue";

interface ConfigFieldsProps {
  fields: Array<ConfigDefineDto>;
}

const controlTypeOptions: Array<IOptionItem> = [
  { label: "文本框", value: "a-input" },
  { label: "多行文本框", value: "a-textarea" },
  {
    label: "下拉框",
    value: "a-select",
    data: { options: [{ label: "<label>", value: "<value>" }] },
  },
  {
    label: "日期选择",
    value: "a-date-picker",
    data: { valueFormat: "YYYY-MM-DD", format: "YYYY-MM-DD" },
  },
  {
    label: "日期时间选择",
    value: "ADatePicker",
    data: {
      valueFormat: "YYYY-MM-DD HH:mm:ss",
      format: "YYYY-MM-DD HH:mm:ss",
      showTime: { format: "HH:mm:ss" },
    },
  },
  {
    label: "时间选择",
    value: "a-time-picker",
    data: { valueFormat: "HH:mm:ss", format: "HH:mm:ss" },
  },
  { label: "复选框", value: "a-checkbox" },
  { label: "单选组", value: "a-radio-group" },
  { label: "图片上传组件", value: "cr-image-upload" },
  { label: "文件上传组件", value: "cr-file-upload" },
  { label: "代码编辑器", value: "cr-monaco-editor" },
  { label: "HTML编辑器", value: "cr-html-editor" },
];

const valueTypeOptions: Array<IOptionItem> = [
  { label: "字符串", value: "string" },
  { label: "布尔", value: "bool" },
  { label: "数值", value: "number" },
  { label: "日期", value: "date" },
  { label: "JSON对象", value: "json" },
];

const props = defineProps<ConfigFieldsProps>();

const formatKeyType = (val: string) => {
  if (!val) {
    return "字符串";
  }
  return valueTypeOptions.find((x) => x.value == val)?.label || "字符串";
};
const controlName = (val: string) => {
  if (!val) {
    return "输入框";
  }
  return controlTypeOptions.find((x) => x.value == val)?.label || "输入框";
};

const popupModel = ref<any>({
  visible: false,
  action: "add",
  data: null,
});

const onAddItem = () => {
  popupModel.value = {
    visible: true,
    data: null,
    action: "add",
    fields: props.fields.map((x) => x.key),
  };
};
const onEditItem = (item: ConfigDefineDto) => {
  popupModel.value = {
    visible: true,
    data: item,
    action: "edit",
    fields: props.fields.map((x) => x.key),
  };
};

const onDeleteItem = (index: number) => {
  if (index == 0) {
    props.fields.shift();
  } else if (index == props.fields.length - 1) {
    props.fields.pop();
  } else {
    props.fields.splice(index, 1);
  }
};

const onDropSuccess = (data: any) => {
  props.fields.map((row, index) => {
    row.sortIndex = index + 1;
  });
};

const onPopupSuccess = (action: string, item: ConfigDefineDto) => {
  if (action == "add") {
    item.sortIndex = props.fields.length + 1;
    props.fields.push(item);
  } else {
    let index = props.fields.findIndex((x) => x.key === item.key);
    if (index !== -1) {
      props.fields.splice(index, 1, { ...item });
    }
  }
};
</script>

<style lang="less" scoped>
.fields-config {
  border: 1px solid #ddd;
}
.row {
  display: flex;
  padding: 5px 0;
  border-bottom: 1px solid #ddd;

  &-header {
    background: #f6f6f6;
    font-weight: bold;
  }
  .col {
    flex: 1;
    padding: 0 8px;
  }

  &-footer{
    padding: 8px;
  }
}
</style>
